DropDownList = {}
DropDownEvent = RegisterEvents{
    "OnSelected"
}

function DropDownList:show(data, x, y)
    self.active = true
    self:xy(x, y)
    self:emit(NodeEvent.Show, data)
end

function DropDownList:onItemClick(child)
    local idx = child:getSiblingIndex()
    self:emit(DropDownEvent.OnSelected, idx)
    self:hide()
end

function DropDownList:hide()
    self.active = false
    self:off(DropDownEvent.OnSelected)
end

local function onDropdownShow(list, data)
    list:setListData(data)
end

function Node.DropDownList()
    local node = Node.new():addComponent(DropDownList)

    local cover = Node.Layer():addTo(node)
    cover.name = "cover"
    cover:addComponent(Button)
    cover:onClick(node.hide, node)

    local bg = Node.Scale9("roundedBorderBox48"):addTo(node)
    bg.name = "dropDownListBg"
    bg:addComponent(Layout)
    bg.topPadding = 5
    bg.leftPadding = 5
    bg.bottomPadding = 5
    bg.rightPadding = 5
    bg.layoutSizeMode = LayoutSizeMode.Stretch
    bg:axy(0, 0)

    local list = Node.List(ObjectPool.dropDownListItem):addTo(bg)
    list:axy(0, 0)
    list.name = "listNode"

    list.listenItemClick = true
    list.color = Color.zero
    node:on(NodeEvent.Show, onDropdownShow, list)
    list:on(NodeEvent.OnChildClicked, node.onItemClick, node)
    return node
end

DropDownList.default = Node.DropDownList()
DropDownList.default.active = false
Layer.Top:add(DropDownList.default)